import { useState, useEffect, useRef } from 'react'
import DarkBtn from '../../../../../../common/DarkBtn';
import { BarChartOutlined, CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import DarkCard from '../../../../../../common/DarkCard';
import { Button, Col, Row, Select, Table } from 'antd';
import usePanelKey from '../../../../../../common/BusinessMap/usePanelKey';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import useMapGlobal from '../../../../../../common/BusinessMap/useMapGlobal';
import LittleTitle from '../../../../../../common/LittleTitle';
import * as echarts from 'echarts';
import CztApi from '../../../../../../../utils/apis/CztApi';
import ScrollTable from '../../../../../../common/ScrollTable';
import { navByWkt } from '../../../../../../../utils/helper/mapHelper';
import FxqyApi from '../../../../../../../utils/apis/FxqyApi';
import EChartsReact from 'echarts-for-react';

export default function Yhdzzt(props) {
    const [visiable,setVisiable]=useState(true);


    const [datas, setDatas] = useState()
    //按名称分类别
    const [yhlx, setYhlx] = useState("地灾")
    const [chartData, setchartData] = useState();
    const [xAxisData, setXAxisData] = useState();
    const [yAxisData, setYAxisData] = useState();
    useEffect(() => {
        FxqyApi.count_yh(yhlx).then(resp => {
            setDatas(resp.data)
            const chartData = resp.data.map(item => ({
                value: item.count,
                name: item.mc
            }));
            setchartData(chartData);
            const xAxisData = resp.data.map(item => item.count);
            setXAxisData(xAxisData);
            console.log('x:',xAxisData)
            const yAxisData = resp.data.map(item => item.mc);
            setYAxisData(yAxisData);
            console.log('y:',yAxisData)
        });
    }, [yhlx])


    const option = {
        grid: { containLabel: true },
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'shadow'
            }
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'category',
            data: yAxisData,
            axisLabel: {
                color: '#fff'
            }
        },
        series: [
            {
                data: xAxisData,
                type: 'bar',
                encode: {
                    x: 'value',
                    y: 'category'
                },
                barWidth: 15,
                itemStyle:{
                    color:'#6495ED'
                }
            },
        ],

    }
    const theme = {
        color: '#fff'
    }
    return <>
    {
        visiable && (
            <div style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '30px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <DarkCard style={{
                position: 'absolute',
                right: '1px',
                width: '300px',
                top: '0px',
                bottom: '20px',
                pointerEvents: 'auto',
                borderRadius: 8,
            }} className="layout-v">
                <div style={{
                    fontSize: 20,
                    fontWeight: "bold",
                    borderBottom: "1px solid #eee",
                    paddingBottom: 12,
                    marginBottom: 12
                }} className='layout-h center'>
                    <div className='fill w0'>区域统计</div>
                    <div>
                        <Button size="small" icon={<CloseOutlined />} onClick={e=>setVisiable(false)}/>
                    </div>
                </div>
                <div className='fill layout-v'>
                    < EChartsReact option={option} style={{
                        height: '90%',
                        width: "100%",
                    }} theme={theme} echarts={echarts}
                    />
                </div>
               </DarkCard >
        </div>
        )
    }
        
    
    </>

}